liankao/src/pages/process/ysb/[ykl_id]/[ze_id].vue

<script setup>
import {useRouter} from "vue-router";
import request from "~/utils/request";
import {REQUEST} from "~/utils/request";
import {user} from "~/store";

const router = useRouter();
const route = useRoute();
const linkTo = (obj) => {
  router.push(obj);
};
let ykl_id = $ref('')
let ze_id = $ref('')
let detail = $ref({})
let dialogVisible = $ref(false)
let detailData = $ref([])
function getDetail() {
  request({
    url: "/yzy/scan/alyz",
    data: {
      ze_id: ze_id
    },
  }).then((res) => {
    if (res.code === '1') {
      detail = res.data;
    }
  })
}
function showDetail(item) {
   dialogVisible = true;
   detailData = item.detail;
}
function clearZip(item) {
  ElMessageBox.confirm("确认执行清空操作?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {

    request({
      url: "/yzy/scan/zip_clear",
      data: {
        ze_id:ze_id,
        user_id:item.user_id
      },
    }).then((res) => {
      if (res.code === "1") {
        ElMessage({
          type: "success",
          message: "操作成功！",
        });
        dialogVisible = false;
        getDetail();
      }
    });
  })
}
if (route.params.ze_id) {
  ze_id = route.params.ze_id;
  ykl_id = route.params.ykl_id;
  getDetail();
}
</script>

<template>
  <NavHeader/>
  <bread-crumb/>
  <div class="w-1200px m-auto">
    <div class="relative -mt-40px flex justify-end">
      <button type="button" class="back-btn" @click="linkTo({name:'step-id',params:{id:ykl_id}})">返回</button>
    </div>
    <div class="mt-10px w-full bg-hex-fff min-h-700px py-20px px-15px">
      <h3 class="text-18px">试卷名称：{{ detail.ze_name }}</h3>
      <h4 class="mt-25px text-18px text-hex-0148E5">扫描上传压缩包情况：{{detail.zip_num}} / {{detail.total}}</h4>
      <div class="mt-25px" v-if="detail.list.length > 0">
        <table class="data-table" cellpadding="0" cellspacing="0">
          <tr>
            <th>上传考点名称</th>
            <th>最近更新时间</th>
            <th>上传压缩包数量</th>
            <th>上传详情</th>
          </tr>
          <tr v-for="item in detail.list">
            <td>{{item.sm_name}}</td>
            <td>{{item.last_time}}</td>
            <td>{{item.zip_num}}</td>
            <td>
              <button type="button" class="op-btn" @click="showDetail(item)">查看</button>
            </td>
          </tr>
        </table>
      </div>
      <div class="mt-25px no-data" v-else>
        <div>
          <h3 class="no-data-img"></h3>
          <h4 class="mt-25px text-18px text-hex-0048e5 text-center">暂无数据</h4>
        </div>
      </div>
    </div>

  </div>
  <commonFooter/>
  <el-dialog v-model="dialogVisible" title="上传详情"
             width="650px"
             custom-class="dialogTrick"
             append-to-body>
    <div class="w-full max-h-600px overflow-auto">
      <table class="data-table" cellpadding="0" cellspacing="0">
        <tr>
          <th>姓名</th>
          <th>账号</th>
          <th>上传份数</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in detailData">
          <td>{{item.realname}}</td>
          <td>{{item.username}}</td>
          <td>{{item.zip_num}}</td>
          <td>
            <button type="button" class="op-btn" @click="clearZip(item)">清空压缩包</button>
          </td>
        </tr>
      </table>
    </div>

  </el-dialog>
</template>
<route lang="json">
{
"meta":{
"title":"压缩包上传情况",
"breadcrumb":true
}
}
</route>
<style scoped lang="scss">
$color: #0048e5;
.data-table {
  width: 100%;
  table-layout: fixed;

  tr:nth-child(even) {
    background: #F1F7FF;
  }

  th {
    height: 74px;
    background: $color;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
    color: #fff;
    &:first-child{
      border-radius: 6px 0 0 0;
    }
    &:last-child{
      border-radius: 0 6px 0 0;
    }
  }

  td {
    padding: 15px 0;
    font-size: 16px;
    color: #474747;
    text-align: center;
  }
}

.no-data {
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-data-img {
    width: 233px;
    height: 199px;
    background: url("/images/no-data.png") center no-repeat;
  }
}
.op-btn {
  height: 30px;
  background: #fff;
  border: 1px solid #003eee;
  padding: 0 10px;
  border-radius: 2px;
  font-size: 14px;
  color: #003eee;
  text-align: center;
  &:disabled{
    background: #ccc;
    border-color: #ccc;
    color: #fff;
    pointer-events: none;
  }
}
</style>